<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>发布活动页</title>
    <script src="js/jquery-3.7.0.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/vue.min.js"></script>
    <link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
    <div class="form-container">
        <h1>发布活动</h1>
        <form id="publish-form">
            <div class="mb-3">
                <label for="activityName" class="form-label">活动名称</label>
                <input type="text" class="form-control" id="activityName" required>
            </div>
            <div class="mb-3">
                <label for="activityImage" class="form-label">活动图片</label>
                <input type="file" class="form-control" id="activityImage" accept="image/*">
            </div>
            <div class="mb-3">
                <label for="startTime" class="form-label">开始时间</label>
                <input type="datetime-local" class="form-control" id="startTime" required>
            </div>
            <div class="mb-3">
                <label for="endTime" class="form-label">结束时间</label>
                <input type="datetime-local" class="form-control" id="endTime" required>
            </div>
            <div class="mb-3">
                <label for="activityLocation" class="form-label">活动地点</label>
                <input type="text" class="form-control" id="activityLocation" required>
            </div>
            <div>
                <label for="activityMaxNumber" class="form-label">活动人数上限</label>
                <input type="number" class="form-control" id="activityMaxNumber" required>
            </div>
            <div class="mb-3">
                <label for="activityContent" class="form-label">活动内容</label>
                <textarea class="form-control" id="activityContent" rows="3" required></textarea>
            </div>
            <button type="submit" class="btn btn-primary">发布活动</button>
        </form>
    </div>
</body>
</html>
<style>
    .form-container {
        width: 600px;
        margin: auto;
        padding: 20px;
        border: 1px solid #ccc;
        border-radius: 5px;
        background-color: #f9f9f9;
    }
</style>
<script>
    $(function () {
    //选择id为publish-form的表单，并绑定submit事件处理函数
    $('#publish-form').on('submit', function (event) {
        // 阻止表单的默认提交行为，使用ajax进行异步提交
        event.preventDefault();
        const now = new Date();
        const activityName = $('#activityName').val();
        const activityImage = $('#activityImage')[0].files[0];
        const startTime = $('#startTime').val().toString();
        const endTime = $('#endTime').val().toString();
        const activityLocation = $('#activityLocation').val();
        const activityMaxNumber = $('#activityMaxNumber').val();
        const activityContent = $('#activityContent').val();

        // 验证开始时间和结束时间
        if(now > new Date(startTime)){
            alert('开始时间不能小于当前时间');
            return;
        }
        if (new Date(startTime) >= new Date(endTime)) {
            alert('结束时间不能小于或等于开始时间');
            return;
        }

        // 发送ajax请求
        // 创建一个 FormData对象，用于存储表单数据，以便通过 AJAX 发送
        const formData = new FormData();
        formData.append('activityName', activityName);
        formData.append('activityImage', activityImage);
        formData.append('startTime', startTime);
        formData.append('endTime', endTime);
        formData.append('activityLocation', activityLocation);
        formData.append('activityMaxNumber', activityMaxNumber);
        formData.append('activityContent', activityContent);

        $.ajax({
            url: 'activity/publish',
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function (response) {
                alert('活动发布成功,等待审批');
            }
        });
    });
});
</script>